import { memo, useState } from 'react'
import type { FC, ReactNode } from 'react'
import Icon from './icon.tsx'

interface IProps {
  children?: ReactNode
  model?: 'click' | 'hover'
  size?: number
  names?: Array<string>
  colors?: Array<string>
  onClick?: (name?: string) => void
}

const IconAction: FC<IProps> = (props) => {
  const { names } = props
  // 当前icon
  const [name, setName] = useState<string>(names[0])
  function change(param: string) {
    if(!names){
      return
    }
    // 找到当前激活icon下标
    let index = names.indexOf(names.find((item) => item === param) as string)
    //否则icon移至下一位
    if (index >= names.length - 1 || index < 0) {
      index = 0
    } else {
      index++
    }
    if (props.onClick) {
      props.onClick(names[index])
    }
    setName(names[index])
  }

  const handleClick = () => {
    change(name)
  }
  return <Icon name={name} size={props.size} onClick={handleClick}></Icon>
}

export default memo(IconAction)
